<template>
  <div>
    <!--主容器-->
    <el-container style="height: 706px; border: 1px solid #eee">
      <!--侧边栏-->
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-tools"></i>系统管理</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-s-platform"></i>系统监控</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <!--头部导航-->
        <el-header style="text-align: right; font-size: 16px;height: 50px">
          <span>当前用户:</span>
        </el-header>
        <!--右侧核心区域-->
        <el-main>
          main
        </el-main>
        <el-footer style="height: 35px;text-align: right;font-size: 12px" >© 2501 Java2501ByTaotie Copyright</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>

export default {
  name: "Admin",
  data() {
    return {

    }
  },
  methods: {
  }
}
</script>
<style scoped>
.el-header {
  background-color: #3c8dbc;
  color: #333;
  line-height: 50px;
}
.el-footer {
  background-color: #f1ffff;
  color: #333;
  text-align: center;
  line-height: 38px;
}
.el-aside,.el-menu,.el-menu-item {
  color: #f1ffff;
  font-weight: 700;
  background-color: #367fa9;
}

</style>
